<template>
    <div id="search">
        <head-tip title='邀请下属' :isback=true>
            <div class="head-right">
                <span @click="sendChildren()" class="link icon-only" style="font-size: 18px; margin-right: 10px;color: #fff;">邀请</span>
            </div>
        </head-tip>
        <section class="content">
            <div class="mint-searchbar">
                <div class="mint-searchbar-inner">
                    <i class="mintui mintui-search" style="font-size:20px"></i> <input type="search" placeholder="请输入你要查找的名帖" class="mint-searchbar-core" v-model="searchValue">
                </div>
                <a class="mint-searchbar-cancel" @click="searchCards">搜索</a>
            </div>
            <!--{{dataList}}-->
            <div id="mescroll" class="mescroll">
                <ul id="dataList" class="data-list" v-cloak>
                    <li v-for="(item,index) in dataList" :key="index" class="cards-one checkcards-one">
                        <div @click="gotoUrl(item.id,item.uid,item.itype)" class="clearfix card-div">
                            <p class="left-pic"><img :src="item.cplogo"></p>
                            <p class="right-name-age">
                                <label>{{item.cname}}<i class="iconfont icon-renzheng" :class="{nocertcolor:!item.bcredit}"></i></label>
                                <span class="address">{{item.alladdress}}</span>
                            </p>
                        </div>
                        <label :for="item.id" class="check-div">
                            <div class="clearfix">
                                <span  class="mint-checkbox is-right">
                                    <input :id="item.id" type="checkbox" class="mint-checkbox-input" v-model="checkedids" :value="item.id">
                                    <span  class="mint-checkbox-core">
                                    </span>
                                </span>
                            </div>
                            
                        </label>
                    </li>
                </ul>
            </div>
        </section>
    </div>
</template>

<script>
import headTip from '@/components/common/head'
import myCheck from '@/components/common/checklist'
export default {
    data () {
      return {
        dataList:[],
        ajaxquery:{},
        mescroll:'',
        searchValue:'',
        checkedids:[],
      };
    },
    computed:{

    },
    methods:{
        sendChildren(){
            if(this.checkedids.length==0){
                alert('请选择名帖！')
                return false
            }
            var checkedidstring=this.checkedids.join(',')
            var _this=this
            var qs = require('qs');
            var sendjson={inviteids:checkedidstring,cardid:this.$route.query.id}
            this.$axios.post(this.httpurl('invite/sendInvite'),qs.stringify(sendjson))
            .then(response=>{
                var data=response.data
                if(data.result==1){
                    alert(decodeURIComponent(data.msg))
                    setTimeout(function(){
                        _this.$router.back(-1)
                    },1000)
                }else{
                    alert(decodeURIComponent(data.msg))
                }
            })
        },
        searchCards(){
            this.mescroll.resetUpScroll();
            this.searchValue=''
        },
        gotoUrl(id,uid,itype){
            if(itype==0){
                this.$router.push({path:"/card/companyCard",query:{id:id,uid:uid}})
            }else{
                this.$router.push({path:"/card/personCard",query:{id:id,uid:uid}})
            }
        },
        upCallback: function(page) {
            //联网加载数据
            var self = this;
            var sendData=this.ajaxquery
            sendData.pageNo=page.num
            sendData.pageSize=page.size
            sendData.findContent=self.searchValue
            sendData.buncid =true
            console.log(sendData)
            this.$axios.get(this.httpurl('card/listCardByFullText'),{params:sendData})
            .then(response=>{
                var data=response.data
                if(data.result==1){
                    var CurData=data.data
                    this.getData(CurData,page)
                }else{
                    alert('你搜索的名帖不存在！')
                    this.mescroll.endErr();
                }
            })
            .catch(error=> {
               console.log(error);
               this.mescroll.endErr();
            });
        },
        downCallback(page){
            this.mescroll.resetUpScroll();
        },
        getData(curData,page){
            var _this=this
            var thisData=curData.list
            thisData.forEach(function(v,k){
                if(v.cplogo){
                    v.cplogo=_this.catchurl(v.cplogo);
                }else{
                    v.cplogo='./static/image/h4.jpg';
                }
                if(v.cprovince!='请选择'){
                    v.alladdress=`${v.cprovince}${v.ccity}${v.cdistrict}${v.caddress}`
                }else{
                    v.alladdress=''
                }
                if(!v.bcredit){
                    v.creditclass='nocertcolor'
                }else{
                    v.creditclass=''
                }
            })
            if(page.num == 1){
                this.dataList = [];
            } 
            this.dataList = this.dataList.concat(thisData);
            var totalPage=curData.totalPage
            this.mescroll.endByPage(thisData.length, totalPage);
        }
    },
    components:{
        headTip,
        myCheck
    },
    created(){
        
    },
    mounted(){
//      data:{'findContent':findecontent,'ctags':tags,'itype':itype,'pageNo':pageNo,'pageSize':20}
        this.ajaxquery['findContent']=this.$route.query.text
        this.ajaxquery['itype']=this.$route.query.itype
        console.log(this.ajaxquery)
        var self= this
        function initMescroll(mescrollId,clearEmptyId){
            var mescroll = new MeScroll(mescrollId, {
                down:{
                    auto:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
                    callback: self.downCallback, //下拉刷新的回调
                },
                up: {
                    auto:true,//初始化完毕,是否自动触发上拉加载的回调
                    callback:self.upCallback, //上拉加载的回调
                    isBounce: false, 
                    toTop:{ //配置回到顶部按钮
                        src : "./static/image/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
                        //offset : 1000
                    },
                    empty:{ //配置列表无任何数据的提示
                        warpId:clearEmptyId,
                        icon : "./static/image/mescroll-empty.png" , 
                    },
                }
            });
            return mescroll
        }
        self.mescroll=initMescroll("mescroll","dataList")
    }
}
</script>
<style>
	.mint-searchbar{background: -moz-linear-gradient(top, #00AA76 0%, #1ACCAC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00AA76), color-stop(100%,#1ACCAC));
    background: -webkit-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: -o-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: -ms-linear-gradient(top, #00AA76 0%,#1ACCAC 100%);
    background: linear-gradient(to right, #00AA76 0%,#1ACCAC 100%);}
    .mint-searchbar-cancel{ color: #fff;}
</style>
<style >
[v-cloak] { display: none }
</style>
<style scoped>
    .mescroll{position: fixed;top: 100px;bottom: 0;height: auto;}
    .content{margin-top: 44px;}
	.cards-one{display:block;overflow:hidden;margin:auto;width:96%;min-height:5rem;border-bottom:solid 1px #ccc}
	.cards-one p.left-pic{display:block;width:3rem;height:3rem;float:left;margin-top:.7rem}
    .cards-one p.left-pic img{width:100%;height:100%;border-radius:100px}
    .cards-one p.right-name-age{display:block;float:left;width:13rem;height:3rem;padding-left:1.5rem;padding-top:0.5rem}
    .cards-one p.right-name-age label{display:block;font-size:1rem;font-weight:400;line-height:1.5rem;text-align: left;}
    .cards-one p.right-name-age label i{color:#2790A6;padding-left:.2rem}
    .cards-one p.right-name-age span.address{display:inline-block;float:left;font-size:.8rem;color:#666;padding-top:.4rem}
    .cards-one p.right-name-age label i.nocertcolor{color:#ccc}
    .checkcards-one{box-sizing: border-box;position: relative;}
    .card-div{min-height: 5rem;width: 70vw;display:flex;}
    .check-div{height: 5rem;position: absolute;right: 10px;width: 40px; display: block;width: 20vw;top: 0;}
    .check-div .mint-checkbox{top:1.3rem;position: relative;right:10px}
</style>
